<template>
    <dl :class="navopen ? 'open' : ''" :style="{ height: (navList.length * 50 + 20) + 'px' }">
        <dd v-for="(item, index) in navList" :key="index" @click="item.callback()">
            <img :src="item.img" alt="">
            <span>{{ $t(item.lang) }}</span>
        </dd>
    </dl>
</template>

<script setup lang="ts">
import { reactive, computed } from 'vue'
let store = useStore()
let navopen = computed<boolean>(() => store.topnavopen)
let navList = reactive<{lang:string,img:string,callback:Function}[]>([
    {
        lang: "language.topnav.Recharge",
        img: "/img/topnav1.png",
        callback: () => {
            store.$patch({ rechange: true })
            store.$patch({ topnavopen: false })
        },
    },
    {
        lang: "language.topnav.Withdrawal",
        img: "/img/topnav2.png",
        callback: () => {
            store.$patch({ withdrawal: true })
            store.$patch({ topnavopen: false })
        },
    }, {
        lang: "language.topnav.Wallet",
        img: "/img/topnav3.png",
        callback: () => {
            $openPage('/user/wallet')
            store.$patch({ topnavopen: false })
        },
    }, {
        lang: "language.topnav.Bonus",
        img: "/img/topnav4.png",
        callback: () => {
            $openPage('/user/bonus')
            store.$patch({ topnavopen: false })
        },
    }, {
        lang: "language.topnav.VIP",
        img: "/img/topnav5.png",
        callback: () => {
            $openPage('/user/vip')
            store.$patch({ topnavopen: false })
        },
    }, {
        lang: "language.topnav.PersonalInfo",
        img: "/img/topnav6.png",
        callback: () => {
            $openPage('/user/info')
            store.$patch({ topnavopen: false })
        },
    }, {
        lang: "language.topnav.TransactionHistory",
        img: "/img/topnav7.png",
        callback: () => {
            $openPage('/user/tran')
            store.$patch({ topnavopen: false })
        },
    }, {
        lang: "language.topnav.Share",
        img: "/img/topnav8.png",
        callback: () => {
            $openPage('/user/share')
            store.$patch({ topnavopen: false })
        },
    }, {
        lang: "language.topnav.Events",
        img: "/img/topnav9.png",
        callback: () => {
            $openPage('/activity')
            store.$patch({ topnavopen: false })
        },
    }, {
        lang: "language.topnav.BettingHistory",
        img: "/img/topnav10.png",
        callback: () => {
            $openPage('/user/betting')
            store.$patch({ topnavopen: false })
        },
    }, {
        lang: "language.topnav.MessageCenter",
        img: "/img/topnav11.png",
        callback: () => {
            $openPage('/user/message')
            store.$patch({ topnavopen: false })
        },
    }, {
        lang: "language.topnav.LogOut",
        img: "/img/topnav1.png",
        callback: () => {
            store.$patch({ userinfo: {} })
            store.$patch({ token: '' })
            store.$patch({ coininfo: {} })
            store.$patch({ cointype: 'BRL' })
            store.$patch({ topnavopen: false })
            $openPage('/')
        },
    }
]);
</script>

<style lang="scss" scoped>
.open {
    opacity: 1;
    transform: scaleY(1);
}

dl {
    width: 289px;
    position: absolute;
    top: 70px;
    right: 10px;
    padding: 10px 0;
    background-color: rgb(45, 49, 53);
    z-index: 200;
    opacity: 0;
    transition: opacity 0.15s ease;
    transition: transform 0.1s ease;
    border-radius: 5px;
    transform: scaleY(0);
    transform-origin: left top;

    &::before {
        content: "";
        width: 0;
        height: 0;
        border-left: 8px solid transparent;
        border-right: 8px solid transparent;
        border-bottom: 8px solid rgb(45, 49, 53);
        position: absolute;
        top: -8px;
        left: 130px;
        /* Change color to suit your needs */
    }

    dd {
        width: 100%;
        height: 50px;
        padding: 0 20px;
        @include flex(row, flex-start, center);
        cursor: pointer;
        img {
            width: 18px;
            margin-right: 20px;
        }

        span {
            font-size: 16px;
            color: #b5bac8;
        }

        &:hover {
            background-color: rgb(39, 42, 48);

            span {
                color: #fff;
            }
        }

    }
}
</style>